<template>
  <div v-show="showModal" class="c-pz1002 c-w100 c-h c-pf c-p-l0 c-p-t0 c-flex-row c-flex-center">
    <div class="c-translucent-balck50 c-text-hidden c-pz-1 c-w100 c-h c-pa c-p-l0 c-p-t0" @click="closeModal" data-type='cancel'></div>
    <div class="c-ww540 c-bg-white c-pv30 c-text-hidden c-flex-column c-aligni-center c-pz1 c-br20 c-p">
      <div @click="closeModal" class="c-ww40 c-opacity50 c-bg-ccc c-br-bl20 c-hh40 c-pa c-p-r0 c-p-t0 c-pz1">
        <i class="iconfont c-fs16 c-fc-white c-pa c-p-t12 c-p-l12">&#xe8fd;</i>
      </div>
      <div class="c-ww300 c-fc-xblack c-fs24 c-textAlign-c c-pb30">长按识别二维码<br>关注公众号后获取开播提醒</div>
      <img v-if="qrCodeUrl" class="c-ww300" :src="$addXossFilter(qrCodeUrl)" />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    qrCodeUrl: {
      type: String,
      default: ''
    },
  },
  data() {
    return {};
  },
  methods: {
    closeModal(e) {
      this.$emit("closedModal");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
